<template>
	<view class="content">
		<view class="search">
			<view class="data">
				
				<view class="selector">
					<view class="Date">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view>{{date}}</view>
						</picker>
					</view>
					<view class="time">
						<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view>{{time}}</view>
						</picker>
					</view>
				</view>
				
				<view class="selector">
					<view class="Date">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view>{{date}}</view>
						</picker>
					</view>
					<view class="time">
						<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view>{{time}}</view>
						</picker>
					</view>
				</view>
				
			</view>
			
			<view class="button" hover-class="button2"
				@click="getData">
				<text>查询</text>
			</view>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				time: '12:01'
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
				console.log(this.date);
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
				console.log(this.time);
			}
		},
		onLoad() {


		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.search {
		height: 15%;
		width: 98%;
		margin: 1%;
		float: inherit;
		border-radius: 10rpx;
		box-shadow: 0 10rpx 5rpx rgba(0, 0, 0, 0.15);
		background-color: #8cde9b;
	}

	.data {
		float: left;
		width: 70%;
		height: 100%;
		margin: auto;
	}
	
	.selector {
		float: left;
		height: 50%;
		width: 100%;
	}
	
	.Date{
		height: 100%;
		width: 50%;
		float: left;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;

		
	}
	
	.time {
		float: left;
		height: 100%;
		width: 50%;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;
		
		
		
	}
	
	.button {
		width: 30%;
		height: 100%;
		float: left;
		border-radius: 10px;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;
		background-color: #18bc37;
		font-size: 1.6em;
	}
	
	.button2 {
		width: 30%;
		height: 100%;
		float: left;
		border-radius: 10px;
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;
		background-color: #d1f2d7;
		font-size: 1.6em;
	}
</style>